<template>
  <div>
    <!-- vant 输入框 -->
    <van-search
      shape="round"
      v-model.trim="value"
      placeholder="请输入搜索关键词"
      @clear="clearFn"
      @input="inputFn"
    />
    <!-- 搜索下容器 -->
    <div v-if="resArr.length === 0" class="search_wrap">
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <!-- v-for  循环遍历  获取数据 -->
        <span
          v-for="(item, index) in hotArr"
          :key="index"
          class="hot_item"
          @click="clickFn(item.first)"
          >{{ item.first }}</span
        >
      </div>
    </div>
    <!-- 搜索结果 -->
    <div v-else class="search_wrap">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <!-- v-for  循环遍历  获取数据 -->
        <!-- list 组件  可以实现滚动到底部加载更多 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- <van-cell
            v-for="item in resArr"
            :key="item.id"
            :title="item.name"
            :label="item.ar[0].name + '-' + item.name"
            center
          >
            <template #right-icon>
              <van-icon name="play-circle-o" size="0.6rem" />
            </template>
          </van-cell> -->

          <SongItem
            v-for="item in resArr"
            :key="item.id"
            :title="item.name"
            :label="item.ar[0].name"
            :id="item.id"
          ></SongItem>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
import SongItem from "@/components/SongItem.vue";
import { hotSearchList, getSearchRes } from "@/api"; //  这里可以简写，自动找出

// // todo  复习下  asnyc    修饰函数，该函数调用得到了promise对象，成功的结果是函数内的返回值
// async function fn() {
//   return 1;
// }
// console.log(fn()); // Promise <fulfilled>: 1 将来借 wat + promse对象就可以获取到promse成功的结果 (既函数内的返回值)

export default {
  data() {
    return {
      value: "", //  输入框
      hotArr: [], //  热搜关键词列表  数据
      resArr: [], //  搜索结果  数据
      loading: false, // 表示是否加载数据，默认false，表示未正在
      finished: false, //  表示是否所有的数据都加载结束了，默认false，表示没有结束
      page: 1, // 页数，默认为1，默认展示第一项数据
    };
  },
  components: {
    SongItem,
  },
  async created() {
    const { data: res } = await hotSearchList();
    // console.log(res);
    this.hotArr = res.result.hots;
  },
  methods: {
    // todo input
    async inputFn() {
      // 输入的时候，发送请求获取搜索结果
      console.log(this.value);

      // !  没有内容，不用发送请求获取搜索结果
      if (this.value === "") return;

      // !  每次输入的时候，都是从第一个还是获取搜索结果 + finished  置为false
      this.page = 1;
      this.finished = false;
      const res = await this.getResFn();
      console.log(res);

      // 做个额外处理，处理没有songs数据的情况
      if (res.result.songs === undefined) {
        // 没有songs数据
        // 把resArr 数组清空
        this.resArr = [];
        return;
      }
      this.resArr = res.result.songs; //  需要将原来的数据覆盖掉
    },
    // todo onload
    async onLoad() {
      console.log("列表滚动到底部");

      // 发送请求  获取搜索结果  调用this.getResFn()
      // !  记得页数加1  表示下一页
      this.page++;
      const res = await this.getResFn();
      console.log(res);

      // !  把获取到的数据添加到 resArr  数组中
      // this.resArr = this.result.songs   // error  会覆盖原先的数据
      if (res.result.songs === undefined) {
        // 没有数据了
        this.finished = true;
        // 表示这次的加载已完成
        this.loading = false;
        // 阻止后续代码执行
        return;
      }

      // 正确  展开运算符，实现拼接数据效果
      this.resArr = [...this.resArr, ...res.result.songs];
      // !  记得当数据加载完成之后，一定要加loading设置为false（表示本次加载完成了）
      this.loading = false;
    },
    // todo  清除按钮
    async clearFn() {
      // console.log(111);

      // 清空数组，最佳匹配会被隐藏
      this.resArr = []; //   可以查看vue面板
    },
    async clickFn(val) {
      // console.log(val);
      this.value = val;

      // // 发送请求，获取搜索结果
      // const { data: res } = await getSearchRes({
      //   // 热搜关键词
      //   keywords: this.value,
      // });
      // console.log(res);
      // !  每次输入的时候，都是从第一个还是获取搜索结果 + finished  置为false
      this.page = 1;
      this.finished = false;
      const res = await this.getResFn(); // this.getResFn() 结果是个 promise对象
      console.log(res); //  promise
      this.resArr = res.result.songs;
    },
    // todo  封装搜索结果的函数
    async getResFn() {
      // 发送请求，获取搜索结果
      const { data: res } = await getSearchRes({
        // 热搜关键词
        keywords: this.value,
        limit: 50,
        offset: (this.page - 1) * 50,
      });
      // ! 记得把获取到的结果返回出去
      return res;
    },
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
